<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部署流程</title>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
</head>

<style>
    div {
        margin-top: 50px;
    }
</style>

<body style="text-align: center">
<div>
    <select id="fileName">
        <option value="test-first.bpmn20.xml">测试一</option>
    </select>
    <button id="submit">部署流程</button>
</div>

<div>
    <select id="userName">
        <option value="张三">张三</option>
        <option value="李四">李四</option>
        <option value="王五">王五</option>
    </select>
    <button id="search">查询</button>
</div>

<div>
    <table border="2">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>assignee</th>
            <th>processInstanceId</th>
            <th>executionId</th>
            <th>description</th>
            <th>taskDefinitionId</th>
            <th>processDefinitionId</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="taskBody">
        </tbody>
    </table>
</div>
</body>


<script th:inline="javascript">

    $(function () {
        $("#submit").click(function () {
            console.log($("#fileName").val());
            $.ajax({
                type: 'GET',
                url: '/flowable/deploy',
                data: {"fileName" : $("#fileName").val()},
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log("出错了！！:" + data);
                }
            });
        })

        $("#search").click(function () {
            search();
        })
    })

    function agree(id, executionId, processInstanceId) {
        console.log("agree:", id, executionId, processInstanceId);
        $.ajax({
            type: 'GET',
            url: '/flowable/agree',
            data: {"taskId" : id},
            success: function (data) {
                search();
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    }

    function reject(id, executionId, processInstanceId) {
        console.log("reject:", id, executionId, processInstanceId);
        $.ajax({
            type: 'GET',
            url: '/flowable/reject',
            data: {"processInstanceId" : processInstanceId, "executionId" : executionId},
            success: function (data) {
                search();
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    }

    function search(){
        $.ajax({
            type: 'GET',
            url: '/flowable/find',
            data: {"userName" : $("#userName").val()},
            success: function (data) {
                console.log(data);
                var html = "";
                for(var i=0; i<data.content.length; i++) {
                    html += "<tr>" +
                        "<td>" + data.content[i].id + "</td>" +
                        "<td>" + data.content[i].name + "</td>" +
                        "<td>" + data.content[i].assignee + "</td>" +
                        "<td>" + data.content[i].processInstanceId + "</td>" +
                        "<td>" + data.content[i].executionId + "</td>" +
                        "<td>" + data.content[i].description + "</td>" +
                        "<td>" + data.content[i].taskDefinitionId + "</td>" +
                        "<td>" + data.content[i].processDefinitionId + "</td>" +
                        "<td><button onclick=\"agree('"+ data.content[i].id +"','"+ data.content[i].executionId +"','"+ data.content[i].processInstanceId +"')\">同意</button>" +
                        "<button onclick=\"reject('"+ data.content[i].id +"','"+ data.content[i].executionId +"','"+ data.content[i].processInstanceId +"')\">驳回</button>" +
                        "</td>" +
                        "</tr>";
                }

                $("#taskBody").html(html);
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    }

</script>

</html>